<template>
  <transition name="dialog">
    <div v-if="beginRegister">
      <div :class="['promptPanel', 'grid_6']">
        <div class="prompot-title">
          <div>注册</div>
          <div class="prompot-close" @click="closePrompot">
            <i class="fa fa-close close-icon"></i>
          </div>
        </div>
        <div class="prompot-content ">
          <div class="tipMessage">
            {{registered.tipMessage}}
          </div>
          <div class="operator-item-panel clearfix">
            <div class="item-label"><label for="useraccount">账号</label></div>
            <input id="useraccount" class="item-input" v-model="register.userAccount"/>
          </div>
          <div class="operator-item-panel clearfix">
            <div class="item-label"><label for="username">昵称</label></div>
            <input id="username" class="item-input" v-model="register.userName"/>
          </div>
          <div class="operator-item-panel clearfix">
            <div class="item-label"><label for="password">密码</label></div>
            <input type="password" id="password" class="item-input" v-model="register.password"/>
          </div>
          <div class="operator-item-panel clearfix">
            <div class="item-label"><label for="veriCode">验证码</label></div>
            <input type="text" id="veriCode" class="item-input" v-model="register.veriCode"/>
          </div>
          <div class="flex flex-v flex-align-center" v-html="currentCode"></div>
          <div class="single-btn">
            <a @click="useRegister">注册</a>
          </div>
        </div>
      </div>
      <div :class="['modal-backdrop', [beginRegister == true? 'in': '']]"></div>
    </div>
  </transition>

</template>

<script>
import axios from '../../node_modules/axios/dist/axios'
export default {
  props: {
    beginRegister: {
      type: Boolean
    }
  },
  data () {
    return {
      register: {
        userAccount: '',
        userName: '',
        password: '',
        veriCode: ''
      },
      registered: {
        tipMessage: ''
      }
    }
  },
  computed: {
    currentCode () {
      return this.$store.state.veriCode
    }
  },
  methods: {
    closePrompot () {
      this.register.userAccount = ''
      this.register.userName = ''
      this.register.password = ''
      this.registered.tipMessage = ''
      this.$emit('close')
    },
    useRegister () {
      let _this = this
      axios.post('/login/userRegister', {
        userAccount: this.register.userAccount,
        userName: this.register.userName,
        password: this.register.password,
        veriCode: this.register.veriCode
      }).then(function (res) {
        if (res.data.status !== 200) {
          _this.registered.tipMessage = res.data.message
          _this.register.userName = ''
          _this.register.password = ''
          _this.register.veriCode = ''
          return
        }
        _this.register.userAccount = ''
        _this.register.userName = ''
        _this.register.password = ''
        _this.register.veriCode = ''
        _this.registered.tipMessage = ''
        _this.registered.success = true
        // 注册成功清空vuex的登录状态
        _this.$store.commit('clearVeriCode')
        _this.$emit('close')
      })
    }
  }
}
</script>

<style scoped>
@import '../assets/css/login-register.css';
</style>
